<template>
  <div class="wrapper">
    <el-breadcrumb separator="/" class="title">
      <el-breadcrumb-item>跟读管理</el-breadcrumb-item>
      <el-breadcrumb-item>跟读列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="2"  type="flex" justify="flex-start">
      <el-col :span="20">
        <el-form :inline="true">
        <el-form-item label="跟读标题">
          <el-autocomplete
            class="inline-input"
            v-model="state1"
            :fetch-suggestions="querySearch"
            @select="handleSelect"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="创建时间">
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          format="yyyy 年 MM 月 dd 日"
          value-format="timestamp"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        </el-form-item>
       <el-form-item label="发布时间">
          <el-date-picker class="setuptime"
                          v-model="value2"
                          type="date" format="MM 月 dd 日" value-format="timestamp">
          </el-date-picker>
       </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="2"  type="flex" justify="flex-start">
      <el-col :span="20">
        <el-form :inline="true">
          <el-form-item label="发布老师">
          <el-cascader v-model="selectedOptions" class="teacher" :options="options">
          </el-cascader>
          </el-form-item>
          <el-form-item label="发布状态">
            <el-cascader v-model="selectedOptions1" class="teacher" :options="options1">
            </el-cascader>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3" style="margin-bottom: 30px">
        <div class="grid-content bg-purple">
          <el-button type="success" round @click="handlesearch">搜索</el-button>
          <el-button type="info" round @click="reset">重置</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 10px">
      <el-col :span="3" :offset="19">
        跟读新增
        <el-button type="primary" icon="el-icon-circle-plus" circle @click="handlenewadd"></el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-table :data="tableData" border
                  v-loading="loading" style="width:90%">
          <el-table-column
            type="index"
            label="序号"
            class-name="index" fixed>
          </el-table-column>
          <el-table-column
            prop="title"
            label="跟读标题"
            class-name="index">
          </el-table-column>
          <el-table-column
            prop="createAt"
            label="创建时间" :formatter="formatter" type="date"
            class-name="index">
          </el-table-column>
          <el-table-column
            prop="uploadTime"
            label="发布时间" :formatter="formatter" type="date"
            class-name="index">
          </el-table-column>
          <el-table-column
            label="发布状态"
            class-name="index">
            <template slot-scope="scope">
              <el-tag :type="scope.row.state | statusFilter">{{scope.row.state | formatStata}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作" prop="status"
            class-name="index">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small" @click="handleedit(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="20">
        <el-pagination
          :page-sizes="[10, 20, 30, 50]"
          :page-size="parseInt(pager.size)"
          layout="total, sizes, prev, pager, next, jumper"
          :total="parseInt(total)"
          @current-change="handleCurrentChange"
          :current-page="parseInt(pager.page)"
          @size-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import axios from 'axios'
  import {formatDate} from "../../../common/common";
  import {readinglist, readingsearch} from '@/api/readingmanagement/reading'
  import {teachername} from '@/api/slider/slider'
  export default {
    name: "ReadingManagement",
    inject: ['reload'],
    data() {
      return {
        total: '',
        pager: {
          page: '',
          size: ''
        },
        fullscreenLoading: true,
        loading: true,
        state1: '',
        currentPage: 1,
        selectedOptions: [],
        selectedOptions1: [],
        tableData: [],
        value1: '',
        value2: '',
        heading: [],
        teacher: [],
        options: [],
        options1: [
          {
            label: '已下线',
            value: '3',
          },
          {
            label: '待发布',
            value: '2',
          },
          {
            label: '已发布',
            value: '1',
          },
        ],
        status: []
      }
    },
    filters: {
      // el-tag类型转换
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'warning',
          3: 'info'
        };
        return statusMap[status]
      },
      formatStata(status) {
        const statusMap = {
          2: '待发布',
          1: '已发布',
          3: '已下线',
        };
        return statusMap[status]
      }
    },
    created() {
      this.getTableInfo();
      this.handleslider();
    },
    methods: {
      //push发布老师下拉菜单
      handleslider(){
        let _this=this;
        teachername().then(function (res) {
          if(res.status==200){
            for(let item of res.data.UserList){
              _this.options.push({
                value:item.id,
                label:item.name
              })
          }
          }
        })
      },
      //点击分页
      handleCurrentChange(val) {
        console.log(val);
        localStorage.readingpage = val;
        this.pager.page = val;
        this.getTableInfo();
      },
      //切换每页显示数
      handleSizeChange(val) {
        this.pager.size = val;
        localStorage.readingsize = val;
        this.getTableInfo();
      },
      //表格时间戳转换
      formatter: function (row, column, cellValue) {
        var date = cellValue;
        if (date == undefined) {
          return "";
        }
        return this.$moment(cellValue).format("YYYY-MM-DD HH:mm:ss");
      },
      //点击跟读标题弹出搜索建议
      querySearch(queryString, cb) {
        var title = this.heading;
        var results = queryString ? title.filter(this.createFilter(queryString)) : title;
        cb(results);
      },
      createFilter(queryString) {
        return (title) => {
          return (title.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        console.log(item);
      },
      handleClick(row) {
        console.log(row);
        this.$router.push({
          name: 'ReadingCheckout',
          params: {
            index: row.id
          }
        })
      },
      handlesearch() {
       if(this.value1){
         localStorage.readingvalue1 = JSON.stringify(this.value1);
       }
       if(this.value2){
         localStorage.readingvalue2 = this.value2;
       }
       if(this.state1){
         localStorage.state1=this.state1;
       }
        if(this.selectedOptions[0]){
          localStorage.selectedOptions=this.selectedOptions[0]
        }
        if(this.selectedOptions1[0]){
          localStorage.selectedOptions1 = this.selectedOptions1[0];
        }
        this.reload();
      },
      reset() {
        localStorage.state1 = '';
        localStorage.readingvalue1 = '';
        localStorage.readingvalue2 = '';
        localStorage.selectedOptions = '';
        localStorage.selectedOptions1 = '';
        this.reload();
      },
      handleedit(row) {
        this.$router.push({
          name: 'ReadingEdit',
          params: {
            name: 'name',
            index: row.id
          }

        })
      },
      handlenewadd() {
        this.$router.push({path: '/1-1'})
      },
      getTableInfo() {
        let params = {};
        this.pager.page=localStorage.readingpage?localStorage.readingpage:1;
        this.pager.size=localStorage.readingsize?localStorage.readingsize:10;
        params.page = this.pager.page;
        params.size = this.pager.size;
        if(localStorage.state1){
          params.title=localStorage.state1;
        }
        if(localStorage.readingvalue1){
          params.createAt=JSON.parse(localStorage.readingvalue1)[0];
          params.updateAt=JSON.parse(localStorage.readingvalue1)[1];
        }
        if(localStorage.readingvalue2){
          params.uploadTime=localStorage.readingvalue2;
        }
        if(localStorage.selectedOptions){
          params.createBy=localStorage.selectedOptions
        }
        if(localStorage.selectedOptions1){
          params.state=localStorage.selectedOptions1
        }
        readinglist(params).then(this.reading);
      },
      reading(res) {
        if (res.status === 200) {
          this.loading = false;
          this.tableData = res.data.UserList;
          this.total = res.data.totle;
          for (let i = 0; i < this.tableData.length; i++) {
            this.heading.push({"value": this.tableData[i].title})
          }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~styles/z.less";
  @import "~styles/css3.less";
  @import "~styles/variables.less";

  .wrapper {
    .w100;
  }

  /deep/ .index {
    text-align: center;
  }

  .title {
    margin: 20px 20px;
  }
  .el-row {
    margin: 10px auto;
    padding-left: 40px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 46px;
    .flex;
    justify-content: space-around;
    align-items: center;
    .inline-input {
      width: 110px;
      padding-left: 10px;
      font-size: 10px;
    }
    .setuptime {
      width: 133px;
      padding-left: 10px;
    }
    .teacher {
      width: 120px;
      padding-left: 10px;
    }
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
